/*
 * @Author: wangshuo
 * @Date: 2021-11-09 10:08:57
 * @Last Modified by: wangshuo
 * @Last Modified time: 2021-11-11 09:03:19
 */
<!--
wireless-day
无线超时统计组件
显示超时日报和超时周报
-->
<template>
    <div class="wireless-day">
        <div class="wire-day-main">
            <div class="left">
                <div
                v-for="item in items"
                :key="item.id"
                class="left-item">
                    <div class="icon-box">
                        <div :style="getStyle(item.img)"></div>
                    </div>
                    <div class="text">
                        <p>{{ item.num }}</p>
                        <p>{{ item.title }}</p>
                    </div>
                </div>
            </div>
            <div class="left">
                <!-- <div
                v-for="item in items1"
                :key="item.id"
                class="left-item">
                    <div class="icon-box">
                        <div :style="getStyle(item.img)"></div>
                    </div>
                    <div
                    class="text"
                    style="color: #fff">
                    {{ item.con }}</div>
                    <div class="title">{{ item.title }}</div>
                </div> -->
                <div class="decri">
                    <p v-html="descri"></p>
                </div>
            </div>
        </div>
        <div class="wire-week-main">
            <div class="left">
                <div
                v-for="item in items"
                :key="item.id"
                class="left-item">
                    <div class="icon-box">
                        <div :style="getStyle(item.img)"></div>
                    </div>
                    <div class="text">
                        <p>{{ item.num }}</p>
                        <p>{{ item.title }}</p>
                    </div>
                </div>
            </div>
            <div class="left">
                <div
                v-for="item in items1"
                :key="item.id"
                class="left-item">
                    <div class="icon-box">
                        <div :style="getStyle(item.img)"></div>
                    </div>
                    <div
                    class="text"
                    style="color: #fff">
                    {{ item.con }}</div>
                    <div class="title">{{ item.title }}</div>
                </div>
            </div>
        </div>
        <div class="wireless-tabs">
            <ul>
                <li
                v-for="tab in tabs"
                :key="tab.id"
                :class="tabActive === tab.id ? 'tab-active' : ''"
                @click="handleClickTab(tab.id)">
                    {{ tab.title }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import {
    getWirelessData, // 获取无线超时统计接口
} from '@/apis';

export default {
    name: 'wireless-day',
    data() {
        return {
            items: [{
                id: 0,
                title: '信号原因',
                img: 'icon1',
                num: 0,
            }, {
                id: 1,
                title: '通信原因',
                img: 'icon2',
                num: 0,
            }, {
                id: 2,
                title: '原因不明',
                img: 'icon3',
                num: 0,
            }],
            items1: [{
                id: 0,
                title: '车载',
                con: '广州局4件，外局1件，300s3件',
                img: 'icon4',
                num: 10,
            }, {
                id: 1,
                title: '线别',
                con: '广州局4件，外局1件，300s3件',
                img: 'icon5',
                num: 10,
            }],
            imgs: {
                icon1: require('../../assets/icon1.png'),
                icon2: require('../../assets/icon2.png'),
                icon3: require('../../assets/icon3.png'),
                icon4: require('../../assets/icon4.png'),
                icon5: require('../../assets/icon5.png'),
            },
            tabs: [{
                id: 0,
                title: '超时日报',
            }, {
                id: 1,
                title: '超时周报',
            }],
            tabActive: 0,
            // dayDescri: null,
            // weekDescri: null,
            descri: null,
            descri1: null,
            descri2: null,
            dayRows: [],
            weekRows: [],
        };
    },
    methods: {
        // 获取样式
        getStyle(img) {
            return {
                width: '.8rem',
                height: '.8rem',
                background: `url(${this.imgs[img]}) no-repeat center center`,
                backgroundSize: 'contain',
            };
        },

        // 点击tabs
        handleClickTab(id) {
            // window.console.log(id);
            this.tabActive = id;
            let rows;
            if (id === 0) {
                rows = this.dayRows;
                this.descri = this.descri1 ? this.descri1 : '暂无信息';
            } else if (id === 1) {
                rows = this.weekRows;
                this.descri = this.descri2 ? this.descri2 : '暂无信息';
            }
            // 信号原因
            const NUM1 = !(rows.find((item) => item.FAULTTYPE === '信号原因')) ? 0 : (rows.find((item) => item.FAULTTYPE === '信号原因').COUNT);
            const NUM2 = !(rows.find((item) => item.FAULTTYPE === '通信原因')) ? 0 : (rows.find((item) => item.FAULTTYPE === '通信原因').COUNT);
            const NUM3 = !(rows.find((item) => item.FAULTTYPE === '原因不明')) ? 0 : (rows.find((item) => item.FAULTTYPE === '原因不明').COUNT);
            this.items[0].num = NUM1;
            this.items[1].num = NUM2;
            this.items[2].num = NUM3;
        },

        // 获取无线超时统计数据
        getWirelessDatas() {
            getWirelessData().then((res) => {
                const {
                    data,
                    code,
                } = res.data;
                if (code === 200) {
                    const {
                        dayRows,
                        weekRows,
                        ljDescri,
                        deptDescri,
                        atpDescri,
                        lineDescri,
                    } = data;
                    this.dayRows = dayRows;
                    this.weekRows = weekRows;
                    this.descri1 = deptDescri;
                    this.descri2 = `按照线别分类：<span style="color: #FFB110;">${lineDescri}</span>;<br/>
                    按照车载分类：<span style="color: #FFB110;">${ljDescri}, ${atpDescri}</span>
                    `;
                    this.handleClickTab(0);
                }
            }).catch((err) => {
                window.console.log('获取无线超时统计数据', err);
            });
        },
    },
    created() {
        /** 默认按照日统计 */
        this.getWirelessDatas();
        // window.console.log('vue instance', this);
    },
};
</script>
<style lang='scss' scoped>
.wireless-day {
    width: 100%;
    height: 100%;
    padding: 0 .22rem;
    box-sizing: border-box;
    position: relative;

    .wireless-tabs {
        position: absolute;
        top: -.6rem; // 22
        left: 3.61rem; // 140
        width: 100%;
        overflow: hidden;

        ul {
            width: 100%;

            li {
                width: 2.56rem /* 92/80 */;
                height: .5rem /* 22/80 */;
                background: url('../../assets/tab.png') no-repeat center center;
                background-size: 100% 100%;
                float: left;
                font-size: .33rem;
                color: #fff;
                text-align: center;
                line-height: .5rem /* 22/80 */;
                margin-right: .075rem /* 6/80 */;
                cursor: pointer;
            }

            .tab-active {
                background: url('../../assets/tab_act.png') no-repeat center center;
                background-size: 100% 100%;
            }
        }
    }

    .wire-day-main {
        width: 100%;
        height: 100%;
        overflow: hidden;

        .left {
            width: 50%;
            height: 100%;
            float: left;
            position: relative;
            display: flex;

            &:first-child {
                &:before {
                    content: '';
                    position: absolute;
                    top: 10%;
                    right: 0;
                    width: 1px;
                    height: 80%;
                    box-sizing: border-box;
                    border-left: 1px dashed #1554a5;
                }
            }

            .left-item {
                flex: 1;
                height: 100%;
                float: left;
                position: relative;
                overflow: hidden;

                .icon-box {
                    width: 50%;
                    height: 100%;
                    float: left;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .text {
                    width: 50%;
                    height: 100%;
                    padding: .25rem 0;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    float: left;
                    font-size: .33rem;

                    p {
                        &:first-child {
                            font-size: .444rem /* 16/80 */;
                            color: #3fdcf7;
                            font-weight: 600;
                        }

                        &:nth-child(2) {
                            font-size: .33rem;
                            color: #fff;
                        }
                    }
                }

                .title {
                    position: absolute;
                    top: .05rem;
                    left: .1rem;
                    font-size: .389rem /* 14/80 */;
                    color: rgba(32,172,255,0.63);
                }
            }

            .decri {
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                padding: 5%;
                p {
                    font-size: .33rem;
                    color: #fff;
                    height: 100%;
                    overflow: auto;
                }
            }
        }
    }
}
</style>
